<template>
    <div id="cesium-container">
    </div>
</template>
  
<script>
export default {
    name: 'ThreeDTilesFeaturePicking',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("cesium-container", {
                terrainProvider: new window.Cesium.CesiumTerrainProvider({
                    url: 'http://data.mars3d.cn/terrain',
                    requestWaterMask: true,
                    requestVertexNormals: true
                }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: true,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });


            window.viewer.scene.globe.depthTestAgainstTerrain = true;

            // Set the initial camera view to look at Manhattan
            const initialPosition = window.Cesium.Cartesian3.fromDegrees(
                -74.01881302800248,
                40.69114333714821,
                753
            );
            const initialOrientation = new window.Cesium.HeadingPitchRoll.fromDegrees(
                21.27879878293835,
                -21.34390550872461,
                0.0716951918898415
            );
            window.viewer.scene.camera.setView({
                destination: initialPosition,
                orientation: initialOrientation,
                // endTransform: window.Cesium.Matrix4.IDENTITY,
            });

            // Load the NYC buildings tileset
            const tileset = new window.Cesium.Cesium3DTileset({
                url: window.Cesium.IonResource.fromAssetId(75343),
            });
            window.viewer.scene.primitives.add(tileset);

            // HTML overlay for showing feature name on mouseover
            const nameOverlay = document.createElement("div");
            window.viewer.container.appendChild(nameOverlay);
            nameOverlay.className = "backdrop";
            nameOverlay.style.display = "none";
            nameOverlay.style.position = "absolute";
            nameOverlay.style.bottom = "0";
            nameOverlay.style.left = "0";
            nameOverlay.style.color = "white";
            nameOverlay.style["pointer-events"] = "none";
            nameOverlay.style.padding = "4px";
            nameOverlay.style.backgroundColor = "black";

            // Information about the currently selected feature
            const selected = {
                feature: undefined,
                originalColor: new window.Cesium.Color(),
            };

            // An entity object which will hold info about the currently selected feature for infobox display
            const selectedEntity = new window.Cesium.Entity();

            // Get default left click handler for when a feature is not picked on left click
            // const clickHandler = window.viewer.screenSpaceEventHandler.getInputAction(
            //     window.Cesium.ScreenSpaceEventType.LEFT_CLICK
            // );

            // If silhouettes are supported, silhouette features in blue on mouse over and silhouette green on mouse click.
            // If silhouettes are not supported, change the feature color to yellow on mouse over and green on mouse click.
            if (window.Cesium.PostProcessStageLibrary.isSilhouetteSupported(window.viewer.scene)) {
                // Silhouettes are supported
                const silhouetteBlue = window.Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
                silhouetteBlue.uniforms.color = window.Cesium.Color.BLUE;
                silhouetteBlue.uniforms.length = 0.01;
                silhouetteBlue.selected = [];

                const silhouetteGreen = window.Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
                silhouetteGreen.uniforms.color = window.Cesium.Color.LIME;
                silhouetteGreen.uniforms.length = 0.01;
                silhouetteGreen.selected = [];

                window.viewer.scene.postProcessStages.add(
                    window.Cesium.PostProcessStageLibrary.createSilhouetteStage([
                        silhouetteBlue,
                        silhouetteGreen,
                    ])
                );

                // Silhouette a feature blue on hover.
                window.viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
                    // If a feature was previously highlighted, undo the highlight
                    silhouetteBlue.selected = [];

                    // Pick a new feature
                    const pickedFeature = window.viewer.scene.pick(movement.endPosition);
                    if (!window.Cesium.defined(pickedFeature)) {
                        nameOverlay.style.display = "none";
                        return;
                    }

                    // A feature was picked, so show it's overlay content
                    nameOverlay.style.display = "block";
                    nameOverlay.style.bottom = `${window.viewer.canvas.clientHeight - movement.endPosition.y
                        }px`;
                    nameOverlay.style.left = `${movement.endPosition.x}px`;
                    const name = pickedFeature.getProperty("BIN");
                    nameOverlay.textContent = name;

                    // Highlight the feature if it's not already selected.
                    if (pickedFeature !== selected.feature) {//?????????有问题
                        silhouetteBlue.selected = [pickedFeature];
                    }
                }, window.Cesium.ScreenSpaceEventType.MOUSE_MOVE);

                // Silhouette a feature on selection and show metadata in the InfoBox.
                window.viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
                    // If a feature was previously selected, undo the highlight
                    silhouetteGreen.selected = [];

                    // Pick a new feature
                    const pickedFeature = window.viewer.scene.pick(movement.position);
                    if (!window.Cesium.defined(pickedFeature)) {
                        // clickHandler(movement);
                        return;
                    }

                    // Select the feature if it's not already selected
                    if (silhouetteGreen.selected[0] === pickedFeature) {//???????有问题
                        return;
                    }

                    // Save the selected feature's original color
                    const highlightedFeature = silhouetteBlue.selected[0];
                    if (pickedFeature === highlightedFeature) {
                        silhouetteBlue.selected = [];
                    }

                    // Highlight newly selected feature
                    silhouetteGreen.selected = [pickedFeature];

                    // Set feature infobox description
                    const featureName = pickedFeature.getProperty("name");
                    selectedEntity.name = featureName;
                    selectedEntity.description =
                        'Loading <div class="cesium-infoBox-loading"></div>';
                    window.viewer.selectedEntity = selectedEntity;
                    selectedEntity.description =
                        `${'<table class="cesium-infoBox-defaultTable"><tbody>' +
                        "<tr><th>BIN</th><td>"
                        }${pickedFeature.getProperty("BIN")}</td></tr>` +
                        `<tr><th>DOITT ID</th><td>${pickedFeature.getProperty(
                            "DOITT_ID"
                        )}</td></tr>` +
                        `<tr><th>SOURCE ID</th><td>${pickedFeature.getProperty(
                            "SOURCE_ID"
                        )}</td></tr>` +
                        `</tbody></table>`;
                }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK);
            } 
            // else {
            //     // Silhouettes are not supported. Instead, change the feature color.

            //     // Information about the currently highlighted feature
            //     const highlighted = {
            //         feature: undefined,
            //         originalColor: new window.Cesium.Color(),
            //     };

            //     // Color a feature yellow on hover.
            //     window.viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
            //         // If a feature was previously highlighted, undo the highlight
            //         if (window.Cesium.defined(highlighted.feature)) {
            //             highlighted.feature.color = highlighted.originalColor;
            //             highlighted.feature = undefined;
            //         }
            //         // Pick a new feature
            //         const pickedFeature = window.viewer.scene.pick(movement.endPosition);
            //         if (!window.Cesium.defined(pickedFeature)) {
            //             nameOverlay.style.display = "none";
            //             return;
            //         }
            //         // A feature was picked, so show it's overlay content
            //         nameOverlay.style.display = "block";
            //         nameOverlay.style.bottom = `${window.viewer.canvas.clientHeight - movement.endPosition.y
            //             }px`;
            //         nameOverlay.style.left = `${movement.endPosition.x}px`;
            //         let name = pickedFeature.getProperty("name");
            //         if (!window.Cesium.defined(name)) {
            //             name = pickedFeature.getProperty("id");
            //         }
            //         nameOverlay.textContent = name;
            //         // Highlight the feature if it's not already selected.
            //         if (pickedFeature !== selected.feature) {
            //             highlighted.feature = pickedFeature;
            //             window.Cesium.Color.clone(
            //                 pickedFeature.color,
            //                 highlighted.originalColor
            //             );
            //             pickedFeature.color = window.Cesium.Color.YELLOW;
            //         }
            //     }, window.Cesium.ScreenSpaceEventType.MOUSE_MOVE);

            //     // Color a feature on selection and show metadata in the InfoBox.
            //     window.viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
            //         // If a feature was previously selected, undo the highlight
            //         if (window.Cesium.defined(selected.feature)) {
            //             selected.feature.color = selected.originalColor;
            //             selected.feature = undefined;
            //         }
            //         // Pick a new feature
            //         const pickedFeature = window.viewer.scene.pick(movement.position);
            //         if (!window.Cesium.defined(pickedFeature)) {
            //             clickHandler(movement);
            //             return;
            //         }
            //         // Select the feature if it's not already selected
            //         if (selected.feature === pickedFeature) {
            //             return;
            //         }
            //         selected.feature = pickedFeature;
            //         // Save the selected feature's original color
            //         if (pickedFeature === highlighted.feature) {
            //             window.Cesium.Color.clone(
            //                 highlighted.originalColor,
            //                 selected.originalColor
            //             );
            //             highlighted.feature = undefined;
            //         } else {
            //             window.Cesium.Color.clone(pickedFeature.color, selected.originalColor);
            //         }
            //         // Highlight newly selected feature
            //         pickedFeature.color = window.Cesium.Color.LIME;
            //         // Set feature infobox description
            //         const featureName = pickedFeature.getProperty("name");
            //         selectedEntity.name = featureName;
            //         selectedEntity.description =
            //             'Loading <div class="cesium-infoBox-loading"></div>';
            //         window.viewer.selectedEntity = selectedEntity;
            //         selectedEntity.description =
            //             `${'<table class="cesium-infoBox-defaultTable"><tbody>' +
            //             "<tr><th>BIN</th><td>"
            //             }${pickedFeature.getProperty("BIN")}</td></tr>` +
            //             `<tr><th>DOITT ID</th><td>${pickedFeature.getProperty(
            //                 "DOITT_ID"
            //             )}</td></tr>` +
            //             `<tr><th>SOURCE ID</th><td>${pickedFeature.getProperty(
            //                 "SOURCE_ID"
            //             )}</td></tr>` +
            //             `<tr><th>Longitude</th><td>${pickedFeature.getProperty(
            //                 "longitude"
            //             )}</td></tr>` +
            //             `<tr><th>Latitude</th><td>${pickedFeature.getProperty(
            //                 "latitude"
            //             )}</td></tr>` +
            //             `<tr><th>Height</th><td>${pickedFeature.getProperty(
            //                 "height"
            //             )}</td></tr>` +
            //             `<tr><th>Terrain Height (Ellipsoid)</th><td>${pickedFeature.getProperty(
            //                 "TerrainHeight"
            //             )}</td></tr>` +
            //             `</tbody></table>`;
            //     }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK);
            // }
        }
    }
}
</script>
  
<style>
#cesium-container {
    width: 100%;
    height: 100%;
}
</style>
  